<script>
	// #ifdef H5 || MP-WEIXIN
	import '@/common/iconfont.css'
	// #endif
	// 导入云对象
	const cloudMusic = uniCloud.importObject('cloudMusic', {
		customUI: true // 取消自动展示的交互提示界面
	});
	export default {
		globalData: {
			// 用户信息
			userInfo: {},
			// 歌单
			musicList: [],
			// 当前歌单位置
			currentIndex: -1,
			bgmMusicManager: null,
			// 定时器 用于更新播放进度 主要作用是减小更新频率
			throttleTimer: null,
			// 歌曲信息
			musicInfo: null,
		},
		onLaunch: function() {
			console.log('App Launch')

			this.userInfo = {
				name: '未登录',
			};
			this.musicInfo = {
				name: '',
				cloudPath: '',
				duration: 0,
				currentTime: 0,
			};
			this.initBackgroundMusic();

			// 添加歌单
			uni.$on('musicList', (data) => {
				console.log('添加歌单>>>');
				console.log(data)
				this.musicList = data.musicList;
				this.currentIndex = data.currentIndex;
			});

			// 提供给子页面访问全局音频实例
			// 初始化
			uni.$on('initAudio', (ID) => {
				this.getMusicInfo(ID).then(musicInfo => {
					this.audioInit(musicInfo);
				});
			})
			// 跳转
			uni.$on('audioSeek', (position) => {
				console.log('跳转>>>');
				this.bgmMusicManager.seek(Math.floor(position));
			});
			// 播放
			uni.$on('playBgm', () => {
				console.log('播放>>>');
				if (this.bgmMusicManager && this.bgmMusicManager.paused) {
					this.bgmMusicManager.play();
				}
			});
			// 暂停
			uni.$on('pauseBgm', () => {
				console.log('暂停>>>');
				if (this.bgmMusicManager && !this.bgmMusicManager.paused) {
					this.bgmMusicManager.pause();
				}
			});
			// 下一首
			uni.$on('nextMusic', () => {
				this.getNextMusic().then(musicInfo => {
					console.log('下一首歌：', musicInfo);
					this.audioInit(musicInfo);
				});
			});
			// 上一首
			uni.$on('preMusic', () => {
				this.getPreMusic().then((musicInfo) => {
					console.log('上一首歌：', musicInfo);
					this.audioInit(musicInfo);
				});
			});
			return 0;
		},
		onUnload() {
			uni.$off('initAudio');
			uni.$off('audioSeek');
			uni.$off('playBgm');
			uni.$off('pauseBgm');
			uni.$off('nextMusic');
			uni.$off('preMusic');
			this.bgmMusicManager.destroy();
		},
		onShow: function() {},
		onHide: function() {},
		methods: {
			/**下一首歌
			 * 
			 */
			async getNextMusic() {
				console.log('获取下一首歌');
				console.log(this.musicList);
				const nextMusic = this.musicList[++this.currentIndex];
				console.log(nextMusic);
				if (!nextMusic) {
					uni.showToast({
						title: '没有下一首了~~~',
						duration: 2000,
						icon: 'none'
					})
					return 0;
				}
				return nextMusic;
			},
			/**前一首歌
			 * 
			 */
			async getPreMusic() {
				console.log('获取上一首歌');
				const previousMusic = this.musicList[--this.currentIndex];
				console.log(previousMusic);
				if (!previousMusic) {
					uni.showToast({
						title: '没有上一首了~~~',
						duration: 2000,
						icon: 'none'
					})
					return 0;
				}
				return previousMusic;
			},
			/**获取音乐信息
			 * @param {String} ID
			 */
			async getMusicInfo(ID) {
				if (!ID) {
					uni.showToast({
						title: '音频_id为空',
						duration: 2000,
						icon: 'none'
					})
					return 0;
				}
				let res = await cloudMusic.getMusicInfo(ID);
				let musicInfo = res.data[0];
				return musicInfo;
			},
			/**应用启动自动初始化
			 * 
			 */
			initBackgroundMusic() {
				this.bgmMusicManager = uni.createInnerAudioContext();
				this.bgmMusicManager.autoplay = false; // 自动播放
				this.bgmMusicManager.loop = false; // 循环播放
				//音频进入可播放状态
				this.bgmMusicManager.onCanplay(() => {
					console.log('准备播放');
					setTimeout(() => {
						this.musicInfo.duration = this.bgmMusicManager.duration;
						console.log('歌曲时常', this.musicInfo.duration);
					}, 100)
				});
				//音频播放进度更新事件
				this.bgmMusicManager.onTimeUpdate(() => {
					if (this.throttleTimer) {
						return 0;
					}
					// 定时器 用于更新播放进度
					this.throttleTimer = setTimeout(() => {
						let currentTime = this.bgmMusicManager.currentTime;
						// console.log('更新时间：', currentTime);
						this.musicInfo.currentTime = currentTime;
						uni.$emit('updateMusicInfo', this.musicInfo);
						this.throttleTimer = null;
					}, 1000); // 每秒更新一次
				});
				this.bgmMusicManager.onEnded(() => {
					console.log('播放完一首歌');
					this.nextMusic();
				});
				this.bgmMusicManager.onPlay(() => {
					console.log('播放中');
				});
				this.bgmMusicManager.onPause(() => {
					console.log('暂停中');
				});
			},
			/**播放器实例初始化，更新上一首与下一首歌的ID
			 * @param {Object} musicInfo
			 */
			audioInit(musicInfo) {
				if (!musicInfo) { //没有云路径
					uni.showToast({
						title: '无音源',
						duration: 2000,
						icon: 'none'
					})
					return 0;
				}
				this.musicInfo = musicInfo;

				this.bgmMusicManager.title = '测试音频_';
				this.bgmMusicManager.src = musicInfo.cloudFilePath;
				this.bgmMusicManager.play();

				return 0;
			},
		},
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	/* #ifdef APP */
	@import "@/common/iconfont.css";
	/* #endif */

	.mask-layer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vh;
		height: 100vh;
		z-index: 99;
	}

	.mask-layer-black {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vh;
		height: 100vh;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		overflow: hidden;
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - 75px - var(--status-bar-height));
		/* #endif */

		/* #ifdef H5 */
		height: calc(100vh - 175rpx - var(--status-bar-height));
		/* #endif */

		/* #ifdef APP */
		height: calc(100vh - 75rpx - var(--status-bar-height));
		/* #endif */
	}

	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.fixbg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.6);
		background-image: url('https://mp-a52cf949-e385-4e78-b2b7-81a8dd621c31.cdn.bspapp.com/cloud/cover/women.jpg');
		background-size: cover;
		background-position: center;
		filter: blur(10px);
		transform: scale(1.1);
		z-index: 1;
	}


	/* 背景 */
	.bg {
		width: 100%;
		height: 100vh;
		background-image:
			radial-gradient(closest-side, rgba(235, 105, 78, 0.3), rgba(235, 105, 78, 0)),
			radial-gradient(closest-side, rgba(243, 11, 164, 0.3), rgba(243, 11, 164, 0)),
			radial-gradient(closest-side, rgba(254, 234, 131, 0.3), rgba(254, 234, 131, 0)),
			radial-gradient(closest-side, rgba(170, 142, 245, 0.3), rgba(170, 142, 245, 0)),
			radial-gradient(closest-side, rgba(248, 192, 147, 0.3), rgba(248, 192, 147, 0));
		background-size:
			130vmax 130vmax,
			80vmax 80vmax,
			90vmax 90vmax,
			110vmax 110vmax,
			90vmax 90vmax;
		background-position:
			-80vmax -80vmax,
			60vmax -30vmax,
			10vmax 10vmax,
			-30vmax -10vmax,
			50vmax 50vmax;
		background-repeat: no-repeat;
		animation: 5s movement linear infinite;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}

	@keyframes movement {

		0%,
		100% {
			background-size:
				130vmax 130vmax,
				80vmax 80vmax,
				90vmax 90vmax,
				110vmax 110vmax,
				90vmax 90vmax;
			background-position:
				-80vmax -80vmax,
				60vmax -30vmax,
				10vmax 10vmax,
				-30vmax -10vmax,
				50vmax 50vmax;
		}

		25% {
			background-size:
				100vmax 100vmax,
				90vmax 90vmax,
				100vmax 100vmax,
				90vmax 90vmax,
				60vmax 60vmax;
			background-position:
				-60vmax -90vmax,
				50vmax -40vmax,
				0vmax -20vmax,
				-40vmax -20vmax,
				40vmax 60vmax;
		}

		50% {
			background-size:
				80vmax 80vmax,
				110vmax 110vmax,
				80vmax 80vmax,
				60vmax 60vmax,
				80vmax 80vmax;
			background-position:
				-50vmax -70vmax,
				40vmax -30vmax,
				10vmax 0vmax,
				20vmax 10vmax,
				30vmax 70vmax;
		}

		75% {
			background-size:
				90vmax 90vmax,
				90vmax 90vmax,
				100vmax 100vmax,
				90vmax 90vmax,
				70vmax 70vmax;
			background-position:
				-50vmax -40vmax,
				50vmax -30vmax,
				20vmax 0vmax,
				-10vmax 10vmax,
				40vmax 60vmax;
		}
	}

	.bg::after {
		width: 100%;
		height: 100%;
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
	}
</style>